<!-- 订单详情页 -->
<template>
  <div class="order_detail_main">
    <div class="detail-headerbar">
      <el-steps :active="active" finish-status="success">
        <el-step title="未付款 " :description="orderList.addTime"></el-step>
        <el-step title="已付款 "></el-step>
        <el-step title="已发货 "></el-step>
        <el-step title="已收货 "></el-step>
        <el-step title="已关闭"></el-step>
      </el-steps>
    </div>
    <div class="body">
      <el-card shadow="hover">
        <div slot="header">
          <span>当前订单状态:</span>
          <span v-if="orderList.statusend == '0'" style="color: green;">订单处理中...</span>
          <span v-else style="color: red;">订单已关闭</span>
        </div>
        <!-- 基本信息 -->
        <div class="block-title">基本信息:</div>
        <div class="table-layout baseInfo">
          <el-row>
            <el-col v-for="(v,key) in orderListCom" :key="key" :span="4">
              <div class="table-cell-head">
                <span>{{ key }}</span>
              </div>
              <div class="table-cell-body">
                <span>{{ v }}</span>
              </div>
            </el-col>
          </el-row>
        </div>
        <!-- 收货人信息 -->
        <div class="block-title">收货人信息:</div>
        <div class="table-layout userInfo">
          <el-row>
            <el-col v-for="(v,key) in userInfoCom" :key="key" :span="6">
              <div class="table-cell-head">
                <span>{{ key }}</span>
              </div>
              <div class="table-cell-body">
                <span>{{ v }}</span>
              </div>
            </el-col>
          </el-row>
        </div>
        <!-- 订单信息 -->
        <div class="block-title">订单信息:</div>
        <div class="product-list-block">
          <el-table class="product-list" :data="orderDetailList" border stripe>
            <el-table-column type="index" :width="50" />
            <el-table-column align="center" prop="gname" label="商品图片" :width="180">
              <template slot-scope="scope">
                <el-image class="cover-img" :src="scope.row.cover_img" />
              </template>
            </el-table-column>
            <el-table-column align="center" label="商品名称" :width="380">
              <template slot-scope="scope">
                <p>{{ scope.row.gname }}</p>
                <p>品牌: {{ scope.row.brandName }} | {{ scope.row.brandEname }}</p>
                <p>{{ scope.row.descr }}</p>
              </template>
            </el-table-column>
            <el-table-column align="center" label="价格货号" :width="380">
              <template slot-scope="scope">
                <p>价格: ￥{{ scope.row.price/100 }}</p>
                <p>货号:{{ scope.row.sku_code }}</p>
              </template>
            </el-table-column>
            <el-table-column align="center" label="型号" :width="180">
              <template slot-scope="scope">
                <p>{{ scope.row.color_text }}</p>
              </template>
            </el-table-column>
            <el-table-column align="center" label="是否退货" :width="180">
              <template slot-scope="scope">
                <p v-if="!scope.row.backId">否</p>
                <a v-if="scope.row.backId" style="color:red" href="#">是</a>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="count" label="数量" :width="180" />
            <el-table-column align="center" prop="count" label="小计" :width="180">
              <template slot-scope="scope">
                <span>{{scope.row.price*(scope.row.count)}}</span>
              </template>
            </el-table-column>
          </el-table>
          <div class="price-sum">
            合计:
            <span>￥{{ total }}</span>
          </div>
        </div>
      </el-card>
    </div>
    <div class="footer">
      <el-button type="primary" v-if="active == 1" @click="sendDone">发货</el-button>
      <el-button type="danger" v-if="active == 3" @click="closeOrder">关闭订单</el-button>
    </div>
  </div>
</template>

<script>
import orderApi from "@/api/order/index";
export default {
  data() {
    return {
      id: "",
      active: 0,
      orderList: {},
      userInfo: [],
      orderDetailList: [],
    };
  },
  computed: {
    // 基本信息
    orderListCom() {
      const orderStatusObj = {
        "0": "未付款",
        "1": "已付款",
        "2": "已发货",
        "3": "已收货",
        "9": "申请退货",
      };
      return {
        订单编号: this.orderList.orderId,
        用户账号: this.orderList.username,
        订单金额: this.orderList.price,
        订单数量: this.orderList.count,
        订单状态: orderStatusObj[this.orderList.orderStatus],
        下单时间: this.orderList.addTime,
        付款时间: this.orderList.payTime,
        发货时间: this.orderList.sendTime,
        收货时间: this.orderList.receiveTime,
        退单时间: this.orderList.backTime,
        结束时间: this.orderList.endTime,
        其他: "",
      };
    },
    // 收货人信息
    userInfoCom() {
      return {
        收货人: this.userInfo.username + "(" + this.userInfo.name + ")",
        手机号码: this.userInfo.tel,
        邮政编码: "41000",
        地市: this.userInfo.cityStr,
        详细地址: this.userInfo.cityBak,
      };
    },
    //总价的计算哈哈
    total() {
      return this.orderDetailList.reduce((cur, val) => {
        return cur + val.count * val.price;
      }, 0);
    },
  },
  created() {
    this.id = this.$route.params.id;
    this.init();
  },
  mounted() {},
  methods: {
    //   发货哈哈
    sendDone() {
      orderApi.sendDone({ id: this.id }).then((res) => {
        console.log(res, "这是发货");
        this.init();
      });
    },
    //关闭订单
    closeOrder() {
      orderApi.closeOrder({ id: this.id }).then((res) => {
        this.init();
        // this.active ++;
      });
    },
    //   初始化
    init() {
      //这就是订单详情
      orderApi.getDetail({ orderId: this.id }).then((res) => {
        this.orderDetailList = res.data;
      });
      //这就是用户详情
      orderApi.getOrderUser({ orderId: this.id }).then((res) => {
        this.userInfo = res.data;
      });
      //吐了啊 ，这是订单列表搜索后返回的第一个
      orderApi.orderList({ orderId: this.id }).then((res) => {
        this.orderList = res.data.list[0];
        if (this.orderList.statusend != 1) {
          this.active = parseInt(res.data.list[0].orderStatus);
        } else {
          this.active = 4;
        }

        console.log(this.active);
      });
    },
  },
};
</script>

<style lang='scss' scoped >
.order_detail_main {
  width: 90%;
  margin: 20px auto;
}
.detail-headerbar {
  width: 60%;
  margin: 30px auto;
}
.table-layout {
  margin: 30px auto;
}
.table-cell-head {
  background-color: rgb(207, 207, 207);
  border: 1px solid #000;
  height: 40px;
  text-align: center;
  line-height: 40px;
}
.table-cell-body {
  height: 50px;
  border: 1px solid #000;
  overflow: hidden;
  text-align: center;
  line-height: 40px;
}
.footer {
  margin: 30px auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
